<template>
  <yk-space size="m" class="reply">
    <yk-badge is-dot :hidden="content?.isread === 1">
      <yk-avatar img-url="avatar.jpeg" v-if="isComment" @click="changeRead(props.content!.id)"></yk-avatar>
    </yk-badge>
    <yk-space dir="vertical" size="s" class="reply__main">
      <div class="reply__name">
        <yk-text strong>{{ content?.user_name }}</yk-text>
        <yk-text type="third" style="font-size: 12px;">{{ momentl(content?.moment!) }}</yk-text>
      </div>
      <yk-text type="secondary">{{ content?.content }}</yk-text>
      <yk-space size="s" align="center" v-if="isComment">
        <yk-tag type="primary" v-if="content?.article!.id! > -1">
          {{ content?.article?.title }}
        </yk-tag>
        <yk-tag v-else>
          文章已被删除
        </yk-tag>
        <yk-text type="danger" v-show="content?.complaint">举报 {{ content?.complaint }}</yk-text>
      </yk-space>
      <IconDeleteOutline class="reply__main--delete" @click.stop="deleteReply(props.content!.id)" />
    </yk-space>
  </yk-space>
</template>

<script setup lang="ts">
import type { ReplyProps } from './type';
import { momentl } from '@/utils/moment';
// import type { ReplyProps } from './type';
const props = withDefaults(defineProps<ReplyProps>(), {
  isComment: true
})

const emits = defineEmits(['delete', 'isread'])

// 删除
const deleteReply = (e: number) => {
  emits('delete', e)
}

// 已读
const changeRead = (e: number) => {
  emits('isread', e)
}
</script>

<style scoped lang="less">
.reply {
  width: 100%;

  &__main {
    border-bottom: 1px solid @line-color-s;
    width: 100%;
    padding-bottom: @space-l;
    flex: 1;
    position: relative;

    &--delete {
      position: absolute;
      right: 0;
      top: 0;
      width: 16px;
      height: 16px;
      cursor: pointer;
      color: @font-color-s;
      display: none;
    }
  }

  &__name {
    display: flex;
    flex-direction: column;
  }

  &:hover {
    .reply__main--delete {
      display: block;
    }
  }
}
</style>
